<script setup>
import {useRoute} from "vue-router";
import {induce} from "@/utils/derive.js";
import {get_dictType_name} from "@/apis/data/dictType/index.js";
import {get_table_field_list} from "@/apis/data/field/index.js";
import {get_role_list_all} from "@/apis/system/role/index.js";
import {
  create_user,
  export_user,
  delete_user,
  update_user,
  get_user_list,
  get_user_obj,
} from "@/apis/system/user/index.js";
import {message} from "ant-design-vue";

{
  const getGender = () => {
    get_dictType_name("性别").then(res => {
      if (res.code === 200) {
        pageData.value.genderList = res.data;
      } else {
        message.error(res.message);
      }
    });
  };

  onMounted(() => {
    getGender();
  });
}

const route = useRoute();
const pageData = ref({
  searchVisible: true,
  createVisible: false,
  updateVisible: false,
  viewVisible: false,
  filters: {
    creator: "",
    modifier: "",
    status: 1,
    username: "",
    email: "",
    name: "",
    mobile: "",
    user_type: null,
  },
  obj: {
    sort: 1,
    remark: "",
    status: true,
    username: "",
    email: "",
    name: "",
    mobile: "",
    user_type: null,
  },
  genderList: [],
  rowSelection: [],
  loading: false,
  total: 0,
  customs: [],
  userList: [],
  roleList: [],
  enumList: ["gender", "user_type",],
  menuButtonList: [],
  expandedKeys: [],
  checkedKeys: [],
  selectedKeys: [],
  permissionObj: {
    role_id: null,
    menuList: [],
    menuButtonList: [],
  },
});
const method = reactive({
  reset: () => {
    pageData.value.filters = {
      creator: "",
      modifier: "",
      status: 1,
      username: "",
      email: "",
      name: "",
      mobile: "",
      user_type: null,
    };
    method.getRoleList();
    method.getUserList();
  },
  query: () => {
    pageData.value.userList = [];
    method.getUserList();
  },
  create: (val) => {
    pageData.value.obj = {
      sort: 1,
      remark: "",
      status: true,
      username: "",
      email: "",
      mobile: "",
      avatar: "",
      name: "",
      gender: "1",
      user_type: 1,
    };
    pageData.value.createVisible = val;
  },
  createOk: () => {
    create_user(pageData.value.obj).then(res => {
      if (res.code === 200) {
        message.success(res.message);
        method.getUserList();
        method.closeCreate();
      } else {
        message.error(res.message);
      }
    });
  },
  closeCreate: () => {
    pageData.value.createVisible = false;
  },
  derive: () => {
    induce(route.meta.title, pageData.value.customs, pageData.value.userList);
    message.success("导出成功");
    method.getRoleList();
  },
  search: () => {
    pageData.value.searchVisible = !pageData.value.searchVisible;
  },
  refresh: () => {
    pageData.value.userList = [];
    method.getUserList();
  },
  export: (val) => {
    if (val) {
      method.getUserList();
    }
  },
  getColumnsList: () => {
    const params = {
      name: route.meta.title,
      path: route.path,
    };
    get_table_field_list(params).then(res => {
      if (res.code === 200) {
        pageData.value.customs = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  getRoleList: () => {
    get_role_list_all().then(res => {
      if (res.code === 200) {
        pageData.value.roleList = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  getUserList: () => {
    pageData.value.loading = true;
    get_user_list(pageData.value.filters).then(res => {
      if (res.code === 200) {
        pageData.value.userList = res.data.items;
        pageData.value.total = res.data.total;
        pageData.value.loading = false;
      } else {
        message.error(res.message);
      }
    });
  },
  update: (val) => {
    pageData.value.updateVisible = true;
    get_user_obj(val.id).then(res => {
      if (res.code === 200) {
        pageData.value.obj = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  updateOk: () => {
    update_user(pageData.value.obj.id, pageData.value.obj).then(res => {
      if (res.code === 200) {
        method.closeUpdate();
        method.getUserList();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    });
  },
  closeUpdate: () => {
    pageData.value.updateVisible = false;
  },
  delete: () => {
    method.getUserList();
  },
  view: (val) => {
    pageData.value.viewVisible = true;
    get_user_obj(val.id).then(res => {
      if (res.code === 200) {
        pageData.value.obj = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  changePage: (page) => {
    pageData.value.filters.page = page;
    method.getUserList();
  },
  changeSize: (val) => {
    pageData.value.filters.page = val.current;
    pageData.value.filters.pageSize = val.size;
    method.getUserList();
  },
});
onMounted(() => {
  method.getColumnsList();
  method.getUserList();
  method.getRoleList();
});
</script>

<template>
  <Search v-if="pageData.searchVisible">
    <a-form :model="pageData.filters">
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="用户名">
            <a-input v-model:value="pageData.filters.username" placeholder="用户名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="邮箱">
            <a-input v-model:value="pageData.filters.email" placeholder="邮箱" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="姓名">
            <a-input v-model:value="pageData.filters.name" placeholder="姓名" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="电话">
            <a-input v-model:value="pageData.filters.mobile" placeholder="电话" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="用户类型">
            <a-select v-model:value="pageData.filters.user_type">
              <a-select-option :value="1">前台用户</a-select-option>
              <a-select-option :value="0">后台用户</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="状态">
            <a-select v-model:value="pageData.filters.status">
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">禁用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item>
            <a-button style="margin-right: 10px" @click="method.reset">重置</a-button>
            <a-button type="primary" @click="method.query">查询</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </Search>
  <Operate
      file="用户管理导入模板.xlsx"
      :export-fun="export_user"
      @onHandleCreate="method.create"
      @onHandleDerive="method.derive"
      @onHandleSearch="method.search"
      @onHandleRefresh="method.refresh"
      @onHandleExport="method.export"
  ></Operate>
  <Table
      :loading="pageData.loading"
      :columns="pageData.customs"
      :data-list="pageData.userList"
      :enum-list="pageData.enumList"
      :delete="delete_user"
      @update="method.update"
      @delete="method.delete"
      @view="method.view"
  >
    <!-- 枚举字段 -->
    <template v-slot:gender="data">
      <a-tag v-if="data.text == '1'" color="blue">男</a-tag>
      <a-tag v-else-if="data.text == '2'" color="green">女</a-tag>
      <a-tag v-else-if="data.text == '3'" color="red">保密</a-tag>
    </template>
    <template v-slot:user_type="data">
      <a-tag v-if="data.text === 0" color="blue">后台用户</a-tag>
      <a-tag v-else-if="data.text === 1" color="green">前台用户</a-tag>
    </template>
  </Table>
  <Pagination
      :page="pageData.filters.page"
      :page-size="pageData.filters.pageSize"
      :total="pageData.total"
      @changePage="method.changePage"
      @changeSize="method.changeSize"
  ></Pagination>
  <a-modal
      v-model:open="pageData.createVisible"
      title="新增"
      ok-text="保存"
      cancel-text="取消"
      width="800px"
      @close="method.closeCreate"
      @cancel="method.closeCreate"
      @ok="method.createOk"
  >
    <a-divider></a-divider>
    <a-form :model="pageData.obj" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="用户名" :colon="false" required>
            <a-input v-model:value="pageData.obj.username" placeholder="用户名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" :colon="false" required>
            <a-input v-model:value="pageData.obj.name" placeholder="姓名" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="邮箱" :colon="false">
            <a-input v-model:value="pageData.obj.email" placeholder="邮箱" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="电话" :colon="false">
            <a-input v-model:value="pageData.obj.mobile" placeholder="电话" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="性别" :colon="false">
            <a-select v-model:value="pageData.obj.gender">
              <a-select-option :value="item.value" v-for="item in pageData.genderList">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="用户类型" :colon="false">
            <a-select v-model:value="pageData.obj.user_type">
              <a-select-option :value="1">前台用户</a-select-option>
              <a-select-option :value="0">后台用户</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="状态" :colon="false">
            <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="排序" :colon="false">
            <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序"
                            allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="用户角色" :colon="false">
            <a-select v-model:value="pageData.obj.role" mode="multiple">
              <a-select-option v-for="item in pageData.roleList" :key="item.id"
                               :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>
  </a-modal>
  <a-modal
      v-model:open="pageData.updateVisible"
      title="编辑"
      ok-text="保存"
      cancel-text="取消"
      width="800px"
      @close="method.closeUpdate"
      @cancel="method.closeUpdate"
      @ok="method.updateOk"
  >
    <a-divider></a-divider>
    <a-form :model="pageData.obj" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="用户名" :colon="false" required>
            <a-input v-model:value="pageData.obj.username" placeholder="用户名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" :colon="false" required>
            <a-input v-model:value="pageData.obj.name" placeholder="姓名" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="邮箱" :colon="false">
            <a-input v-model:value="pageData.obj.email" placeholder="邮箱" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="电话" :colon="false">
            <a-input v-model:value="pageData.obj.mobile" placeholder="电话" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="性别" :colon="false">
            <a-select v-model:value="pageData.obj.gender">
              <a-select-option :value="item.value" v-for="item in pageData.genderList">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="用户类型" :colon="false">
            <a-select v-model:value="pageData.obj.user_type">
              <a-select-option :value="1">前台用户</a-select-option>
              <a-select-option :value="0">后台用户</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="状态" :colon="false">
            <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="排序" :colon="false">
            <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序"
                            allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="用户角色" :colon="false">
            <a-select v-model:value="pageData.obj.role" mode="multiple">
              <a-select-option v-for="item in pageData.roleList" :key="item.id"
                               :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>
  </a-modal>
  <a-drawer
      v-model:open="pageData.viewVisible"
      title="查看"
      width="800"
  >
    <a-form :model="pageData.obj" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="用户名" :colon="false" required>
            <a-input v-model:value="pageData.obj.username" placeholder="用户名" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" :colon="false" required>
            <a-input v-model:value="pageData.obj.name" placeholder="姓名" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="邮箱" :colon="false">
            <a-input v-model:value="pageData.obj.email" placeholder="邮箱" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="电话" :colon="false">
            <a-input v-model:value="pageData.obj.mobile" placeholder="电话" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="性别" :colon="false">
            <a-select v-model:value="pageData.obj.gender">
              <a-select-option :value="item.value" v-for="item in pageData.genderList">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="用户类型" :colon="false">
            <a-select v-model:value="pageData.obj.user_type">
              <a-select-option :value="1">前台用户</a-select-option>
              <a-select-option :value="0">后台用户</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="状态" :colon="false">
            <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="排序" :colon="false">
            <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序"
                            allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建人" :colon="false">
            <a-input v-model:value="pageData.obj.creator" placeholder="创建人" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改人" :colon="false">
            <a-input v-model:value="pageData.obj.modifier" placeholder="修改人" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建时间" :colon="false">
            <a-input v-model:value="pageData.obj.create_time" placeholder="创建时间" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改时间" :colon="false">
            <a-input v-model:value="pageData.obj.update_time" placeholder="修改时间" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="排序" :colon="false">
            <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="用户角色" :colon="false">
            <a-select v-model:value="pageData.obj.role" mode="multiple">
              <a-select-option v-for="item in pageData.roleList" :key="item.id"
                               :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>

<style scoped lang="less">

</style>